import React, { useState } from 'react';
import { Form, Input, DatePicker, Button, Table, Card } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import api from '../services/api';

const { RangePicker } = DatePicker;

const QueryPage = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 20,
    total: 0
  });

  const handleSearch = async (page = 1) => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      
      const params = {
        studentId: values.studentId,
        name: values.name,
        startDate: values.dateRange?.[0]?.format('YYYY-MM-DD'),
        endDate: values.dateRange?.[1]?.format('YYYY-MM-DD'),
        page,
        pageSize: pagination.pageSize
      };

      const response = await api.queryScores(params);
      
      if (response.success) {
        setData(response.data.records);
        setPagination({
          ...pagination,
          current: response.data.page,
          total: response.data.total
        });
      }
    } catch (error) {
      // 错误已在 request.js 中处理
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: '准考证号',
      dataIndex: 'studentId',
      key: 'studentId',
      width: 120
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: 'className',
      width: 120
    },
    {
      title: '考试名称',
      dataIndex: 'examName',
      key: 'examName',
      width: 150
    },
    {
      title: '语文',
      dataIndex: 'chinese',
      key: 'chinese',
      width: 80
    },
    {
      title: '数学',
      dataIndex: 'math',
      key: 'math',
      width: 80
    },
    {
      title: '英语',
      dataIndex: 'english',
      key: 'english',
      width: 80
    },
    {
      title: '物理',
      dataIndex: 'physics',
      key: 'physics',
      width: 80
    },
    {
      title: '化学',
      dataIndex: 'chemistry',
      key: 'chemistry',
      width: 80
    },
    {
      title: '生物',
      dataIndex: 'biology',
      key: 'biology',
      width: 80
    },
    {
      title: '政治',
      dataIndex: 'politics',
      key: 'politics',
      width: 80
    },
    {
      title: '历史',
      dataIndex: 'history',
      key: 'history',
      width: 80
    },
    {
      title: '地理',
      dataIndex: 'geography',
      key: 'geography',
      width: 80
    },
    {
      title: '总分',
      dataIndex: 'totalScore',
      key: 'totalScore',
      width: 100
    },
    {
      title: '校次',
      dataIndex: 'schoolRank',
      key: 'schoolRank',
      width: 80
    }
  ];

  return (
    <Card title="查询成绩">
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16 }}
      >
        <Form.Item name="studentId" label="准考证号">
          <Input placeholder="请输入准考证号" />
        </Form.Item>

        <Form.Item name="name" label="姓名">
          <Input placeholder="请输入姓名" />
        </Form.Item>

        <Form.Item name="dateRange" label="考试日期">
          <RangePicker />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            icon={<SearchOutlined />}
            onClick={() => handleSearch(1)}
            loading={loading}
          >
            查询
          </Button>
        </Form.Item>
      </Form>

      <Table
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        pagination={{
          ...pagination,
          onChange: handleSearch
        }}
        scroll={{ x: 1500 }}
      />
    </Card>
  );
};

export default QueryPage;
